<template>
    <div class="box_cont flex_center_center">
        <h2>课程选择</h2>
        <p class="text">为您设计有针对性的课程，迅速提高英语水平</p>
        <div class="type_box">
            <div class="type_cont cur w_full">
              <img class="typeList"  src="@/assets/newImg/logo.png" alt="">
                <div class="course-view w_full h_full transition" :style="{ '--scale': scale }">
                    <div 
                        class="w-full h_full el-image absolute cur transition"
                        v-for="item in 3"
                        :key="item"
                        @click="typeFn(item)"
                        :class="`course-${item}`"
                    >
                        <img :src="require(`@/assets/newImg/course${item}.png`)" class="el-image__inner"  alt=""/>
<!--                        <img :src="require(`@/assets/course/course${item}.png`)" class="el-image__inner" />-->
                    </div>
                </div>
            </div>
        </div>
        <div style="padding-top: 30px">
          <el-button type="primary" @click="typeFn('语法')">语法课程</el-button>
          <el-button type="success" @click="typeFn('写作')">写作课程</el-button>
        </div>
      <c_popup ref="popup" :title="'选择阅读模式'">
            <div class="flex" style="align-items: center; justify-content: space-between; padding: 30px 25px;cursor: pointer;">
                <div class="boxs" style="background-color: #927fc7;" @click="goEvent(1)">
                    <div style="font-size: 14px;">阅读理解</div>
                    <div style="margin-top: 10px; font-size: 12px;">让知识触手可及</div>
                    <img :src="require(`@/assets/01.svg`)" alt="">
                </div>
                <div class="boxs" style="background-color: #3d67ff;" @click="goEvent(3)">
                    <div style="font-size: 14px;">AI阅读</div>
                    <div style="margin-top: 10px; font-size: 12px;">探索知识的无限可能</div>
                    <img style="top: 2px; right: 3px;" :src="require(`@/assets/02.svg`)" alt="">
                </div>
            </div>
        </c_popup>
    </div>
</template>

<script>
import c_popup from '@/components/popup/index.vue'
import bear_content from '@/views/components/bear_content.vue'
import { appointmentInfo } from '@/api/appointment.js'
import { learnDetail, startLearn } from '@/api/learn.js'
export default {
    components:{
        c_popup,
        bear_content
    },
    props: {
        bearRef: {
            type: Object,
            default: () => ({})
        }
    },

    data() {
        return {
            appointmentId: 0,
            appointment: {},
            userId: 0,
            learnId: 0,
            clientWidth: 0,
            scale: 0.7,
            listenerResize: this.debounce(this.resize)
        }
    },
    mounted(){
        this.appointmentId = this.$route.query.appointmentId
        this.userId = this.$route.query.userId
        this.learnId = this.$route.query.learnId
        this.clientWidth = document.documentElement.clientWidth
        addEventListener('resize', this.listenerResize)
        if (this.appointmentId) {
            this.getAppointInfo()
        }
    },
    beforeDestroy() {
        this.timeStamp = ''
        removeEventListener('resize', this.listenerResize)
    },
    methods: {
        getAppointInfo() {
            appointmentInfo({ id: this.appointmentId, userId: this.userId}).then(res => {
                this.appointment = res.data
            })
        },
        async getLearnInfo() {
            await learnDetail({id: this.learnId}).then(res => {
                this.learnInfo = res.data
                this.userId = this.learnInfo.user ? this.learnInfo.user.id : 0
                this.appointmentId = this.learnInfo.appointmentId
            })
        },
        async typeFn(i){
            if (this.learnId && !this.learnInfo) {
                await this.getLearnInfo()
            }
          console.log(this.userId)
            switch(i){
                case 1: // 单词识记
                    // this.$store.commit('user/setFull',true)
                    // if (this.learnId) {
                    //     this.$router.push('/work?learnId='+this.learnId+'&category=1')
                    // } else if (this.appointmentId) {
                    //     this.$router.push(`/work?appointmentId=${this.appointmentId}&userId=${this.userId}`+'&category=1')
                    // }
                    // else {
                    //     this.$router.push('/work?category=1')
                    // }
                  if (this.userId) {
                    this.$router.push(`/vocabulary/exam?flag=1&userId=${this.userId}&learnId=${this.learnId}`)
                  } else {
                    this.$router.push('/vocabulary/exam?flag=1')
                  }
                    break;
                case 2: // 例句速记 
                    // this.$store.commit('user/setFull',true)
                    // if (this.learnId) {
                    //     this.$router.push('/work?learnId='+this.learnId+'&category=9')
                    // } else if (this.appointmentId) {
                    //     this.$router.push(`/work?appointmentId=${this.appointmentId}&userId=${this.userId}`+'&category=9')
                    // }
                    // else {
                    //     this.$router.push('/work?category=9')
                    // }
                  this.$store.commit('user/setFull',true)
                  if (this.learnId) {
                    this.$router.push('/work?learnId='+this.learnId+'&category=1')
                  } else if (this.appointmentId) {
                    this.$router.push(`/work?appointmentId=${this.appointmentId}&userId=${this.userId}`+'&category=1')
                  }
                  else {
                    this.$router.push('/work?category=1')
                  }
                    break;
                case 5:
                    // 词汇测试
                    if (this.userId) {
                        this.$router.push(`/vocabulary/exam?flag=1&userId=${this.userId}&learnId=${this.learnId}`)
                    } else {
                        this.$router.push('/vocabulary/exam?flag=1')
                    }
                    break;
                case 3:// 阅读理解
                    // 阅读理解、时文阅读、AI阅读
                    this.$refs.popup.show();
                    break;
              case '语法':
                if (this.userId){
                  this.$router.push(`/study/grammar?ref=homepage&userId=${this.userId}`)
                }else {
                  this.$router.push(`/study/grammar?ref=homepage`)
                }
                break;
              case '写作':
                if (this.userId){
                  this.$router.push(`/study/writing?ref=homepage&userId=${this.userId}`)
                }else {
                  this.$router.push(`/study/writing?ref=homepage`)
                }
                break;
                case 4: // 词串
                    if (this.appointmentId) {
                        this.$router.push(`/reading/index?appointmentId=${this.appointmentId}&userId=${this.userId}&category=8`)
                    }else if (this.learnInfo && this.learnInfo.appointmentId) {
                        this.$router.push(`/reading/index?appointmentId=${this.learnInfo.appointmentId}&userId=${this.userId}&category=8`)
                    }
                    else {
                        this.$router.push(`/reading/index?category=8`)
                    }
                    break;
                default:
                    this.$message.warning({ el: this.bearRef.$el, message: '语法训练、听力训练正在更新中，敬请期待' });
                break;

            }
        },
        goEvent(data) {
            if (data === 1) {
                // 阅读理解
                if (this.appointmentId) {
                    this.$router.push(`/reading/index?appointmentId=${this.appointmentId}&userId=${this.userId}&category=4`)
                } else if (this.learnInfo && this.learnInfo.appointmentId) {
                    this.$router.push(`/reading/index?appointmentId=${this.learnInfo.appointmentId}&userId=${this.userId}&category=4`)
                } else {
                    this.$router.push(`/reading/index?category=4`)
                }
            } else if (data === 3) {
                // AI阅读
                if (this.appointmentId) {
                    this.$router.push(`/aireading/index?appointmentId=${this.appointmentId}&userId=${this.userId}&categoryId=1`)
                } else {
                    this.$router.push(`/aireading/index?categoryId=1`)
                }
            }
        },
        resize() {
          const width = document.documentElement.clientWidth;
          if (width > this.clientWidth && this.scale < 1) {
            this.scale += 0.05; // 放大比例
          } else if (this.scale > 0.7) {
            this.scale -= 0.05; // 缩小比例
          }
          this.clientWidth = width; // 更新当前窗口宽度
        },
        debounce(fn, delay = 300) {
            let timer = null
            return function(...args) {
                timer && clearTimeout(timer)
                timer = setTimeout(() => fn(args), delay)
            }
        },
        backFn(){
            this.$router.back()
        }
    },
}
</script>

<style lang="scss" scoped>
@media (max-width: 1200px) {
  .course-1{
    width: 50rem;
    height: 23rem;
    top: -39px;
    left: 48%;
    transform: translate(-50%);
  }
}

@media (max-width: 1400px) {
  .course-1{
    width: 50rem;
    height: 23rem;
    top: -49px;
    left: 48%;
    transform: translate(-50%);
  }
}

@media (min-width: 1400px) {
  .course-1{
    width: 50rem;
    height: 23rem;
    top: -61px;
    left: 48%;
    transform: translate(-50%);
  }
}
@media (min-width: 1700px) {
  .course-1{
    width: 50rem;
    height: 23rem;
    top: -72px;
    left: 48%;
    transform: translate(-50%);
  }
}
@media (min-width: 2000px) {
  .course-1{
    width: 50rem;
    height: 23rem;
    top: -93px;
    left: 48%;
    transform: translate(-50%);
  }
}
.absolute{position: absolute}

.course-1:hover{transform: translate(-50%) scale(1.03);z-index: 1;}
.course-2{
  height: 100%;
  right: -8rem;
  width: 31rem;
  top: 7rem;
}
.course-3{
  width: 32rem;
  height: 96%;
  bottom: -8rem;
  right: 45%;
}
.course-4{width: 28.4rem;height: 22.3rem;bottom: -5.5rem;left: 10.2rem}
.course-5{width: 19.9rem;height: 31.1rem;left: 3.7rem;top: 10.9rem}
.course-2:hover,.course-3:hover,.course-4:hover,.course-5:hover{transform: scale(1.03);z-index: 2}
.course-view{position: relative;transform: scale(var(--scale))}

.box_cont{
    text-align: center;
    color: #fff;
    // padding: 50px 30px;
    h2{
        font-size: 3.6rem;
        font-weight: bold;
        text-align: center;
        // color: #3A3F5E;
    }
    .text{
        padding: 1.5rem 0 3rem;
        // color: #626780;
        font-size: 2rem;
    }
    overflow-y: scroll;
    &::-webkit-scrollbar {
        width: 0px;
        height: 1px;
    }
}
.typeList{
  position: absolute;
  width: 120px;
  height: 118px;
}
.type_cont{
    width:  43rem;
    height:  43rem;
    position: relative;
    margin: auto;
    background-image: url('@/assets/newImg/yuan.png');
  background-repeat: no-repeat;  /* 禁止背景图像重复 */
  background-size: cover;  /* 背景图像覆盖整个视窗 */
  background-position: center;  /* 背景图像居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.back_img{
    width: 4rem;
    height: 4rem;
    margin-top: .8rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}

.boxs{width: 166px; color: #fff; font-size: 16px; height: 90px; background-color: #4d6c8a; border-radius: 10px; padding: 0 15px; display: flex; flex-direction: column; justify-content: center; position: relative;}
.boxs img{position: absolute; right: 5px; top: 0px; width: 50px; opacity: 0.2;}
</style>